<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			#small{width:500px; height: 500px;float:left;position:relative; margin-left: 100px;margin-top: 100px;}
			#small img{width:500px; height: 500px; }
			#glass{width:250px; height:250px;background: #fff;position: absolute;display: none;opacity: 0.3; /*border-radius: 50%;*/}
			#big{
				width:500px; 
				height:500px;
				float:left;
				display:none;
				overflow:hidden;
				position:absolute;
				left: 60px;
				margin-left:600px;
				margin-top: 100px;
				}
			#big img{
				width:1000px; 
				height:1000px;
				position: absolute;
				left: 0;
				right: 0;}
		</style>
		<script>
			window.onload = function(){	
				var oSmall = document.getElementById('small')
				var oBig = document.getElementById("big");
				var oG = document.getElementById("glass");
				var oImg = document.getElementsByTagName("img")[1];
				oSmall.onmouseover = function(evt){						
					/*var gla = document.createElement("div");
					oSmall.appendChild(gla);
					gla.id = "glass";
					oSmall.setAttribute("id") = 'glass' ;*/
					//alert("")
					/*var e = evt ||window.event;
					var left = e.offsetX - oSmall.clientleft;
					var right = e.offsetY - oSmall.clientTop;
					
					oG.style.left = left + 'px';
					oG.style.top =  right + 'px';*/					
					var e = evt ||window.event;
					oG.style.display = "block";
					oBig.style.display = "block";
					oSmall.style.cursor = "move";
					var e = evt ||window.event;
					var left = e.clientX - oSmall.offsetLeft - oG.offsetWidth /2;
					var top = e.clientY - oSmall.offsetTop - oG.offsetHeight /2;
					console.log(left + " " + top);
					/*
					if(left<= 0){
						left = 0;
					}else if(left > oSmall.offsetWidth-oG.offsetWidth){
						left = oSmall.offsetWidth-oG.offsetWidth;
					}else{
						oG.style.left = left + 'px'
					}					
					if(top <= 0){
						top = 0;
					}else if(top>oSmall.offsetHeight-oG.offsetHeight){
						top = oSmall.offsetHeight-oG.offsetHeight
					}else{
						oG.style.top = top+ 'px'
					};*/

				};				
				oSmall.onmousemove = function(evt){
					var e = evt ||window.event;
					var left = e.clientX - oSmall.offsetLeft - oG.offsetWidth / 2;
					var top = e.clientY - oSmall.offsetTop - oG.offsetHeight / 2;	
					//console.log(left)					
					//控制边界
					if(left< 0){
						left = 0;
					}else if(left > oSmall.offsetWidth-oG.offsetWidth){
						left = oSmall.offsetWidth-oG.offsetWidth;
					}else{
						oG.style.left = left + 'px'
					}					
					if(top < 0){
						top = 0;
					}else if(top>oSmall.offsetHeight-oG.offsetHeight){
						top = oSmall.offsetHeight-oG.offsetHeight
					}else{
						oG.style.top = top+ 'px'
					};
					
					oImg.style.left = -left*2 + 'px';
					oImg.style.top = -top*2 + 'px';
						
				};
				oSmall.onmouseout= function(){
					oG.style.display = "none";
					oBig.style.display = "none";	
				};
				
			};


		</script>
	</head>
	<body>
		<div id="small">
			<img src="img/47.jpg" />
			<div id="glass"></div>
		</div>
		<div id= big>
			<img src="img/47.jpg">
		</div>
	</body>
</html>
